<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="url" label="图片">
      <template #default="{ row }">
        <el-image style="width: 80px; height: 80px;" :src="row.url"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="小区名称" />
    <el-table-column prop="title" label="小区描述" />
    <el-table-column prop="size" label="房屋大小" />
    <el-table-column prop="price" label="房屋价格" />
    <el-table-column prop="state" label="状态">
      <template #default="{ row }">
        <span>{{ row.state == 1 ? "已经装修" : "未装修" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="level" label="装修程度" />
    <el-table-column prop="sizeRoom" label="房屋格局" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" @click="emits('edit', row)">编辑</el-button>
        <el-button type="danger" @click="deleteHouseList(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div style="margin: 20px; display: flex; flex-direction: row-reverse;">
    <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const props = defineProps(['tableData', 'total', 'pageSize', 'currentPage'])
const emits = defineEmits(['sizeChange', 'currentChange', 'edit', 'delete'])
// 切换一页的数据
function handleSizeChange(size) {
  emits('sizeChange', size)
}
// 切换当前页
function handleCurrentChange(current) {
  emits('currentChange', current)
}
const deleteHouseList = (row) => {
  ElMessageBox.confirm(
    '确定输出该信息吗?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      emits('delete', { id: row.id })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消了操作',
      })
    })
}
</script>
<style scoped></style>
